<template>
    <div>
        <page-main>
            <!-- tabs -->
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="tabCheck">
                <el-tab-pane :label="`线索(${searchNum.user_count})`" name="0">
                    <!-- 表格 table -->
                    <el-table ref="table" :data="dataList" border stripe highlight-current-row>
                        <el-table-column prop="type" label="线索名称">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="userDetail(scope.row)">{{ scope.row.name }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号" />
                        <el-table-column prop=" pool_name" label="线索池" />
                        <el-table-column prop="last_log_day" label="未跟进天数" />
                        <el-table-column prop="member" label="跟进人" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`客户(${searchNum.kehu_count})`" name="1">
                    <!-- 表格 table -->
                    <el-table ref="table" :data="dataList" border stripe highlight-current-row>
                        <el-table-column prop="type" label="客户名称">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="kehuDetail(scope.row.id)">{{ scope.row.name }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号" />
                        <el-table-column prop=" pool_name" label="客户池" />
                        <el-table-column prop="last_log_day" label="未跟进天数" />
                        <el-table-column prop="member" label="跟进人" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`签约(${searchNum.business_count})`" name="2">
                    <!-- 表格 table -->
                    <el-table ref="table" :data="dataList" border stripe highlight-current-row>
                        <el-table-column prop="type" label="商机名称">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="businessDetail(scope.row)">{{ scope.row.name }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="客户名称">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="kehuDetail(scope.row.user_id)">{{ scope.row.user_name }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_phone" label="手机号" />
                        <el-table-column prop=" pool_name" label="客户池" />
                        <el-table-column prop="member" label="跟进人" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="`回款(${searchNum.order_count})`" name="3">
                    <!-- 表格 table -->
                    <el-table ref="table" :data="dataList" border stripe highlight-current-row>
                        <el-table-column prop="type" label="订单编号">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="orderDetail(scope.row)">{{ scope.row.order_no }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="客户名称">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="kehuDetail(scope.row.user_id)">{{ scope.row.user_name }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_phone" label="手机号" />
                        <el-table-column prop=" pool_name" label="客户池" />
                        <el-table-column prop="member" label="跟进人" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
        <!-- 线索详情 -->
        <user-detail-drawer ref="userDetailDrawer" @success="getList" />
        <!-- 客户详情 -->
        <kehu-detail-drawer ref="kehuDetailDrawer" @success="getList" />
        <!-- 商机详情 -->
        <business-detail-drawer ref="businessDetailDrawer" @success="getList" />
        <!-- 订单详情 -->
        <order-detail-drawer ref="orderDetailDrawer" @success="getList" />
    </div>
</template>

<script>
import { userList, searchNum } from '@/api/clue'
import { userList as kehuList } from '@/api/kehu'
import { businessList } from '@/api/business'
import { orderList } from '@/api/order'
import UserDetailDrawer from '../clue/components/DetailDrawer'
import KehuDetailDrawer from '../custom/components/DetailDrawer'
import BusinessDetailDrawer from '../niche/components/DetailDrawer'
import OrderDetailDrawer from '../order/components/DetailDrawer'
export default {
    name: 'SearchList',
    components: {
        UserDetailDrawer,
        KehuDetailDrawer,
        BusinessDetailDrawer,
        OrderDetailDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '体验',
                2: '新购',
                3: '增购',
                4: '复购'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                1: '进行中',
                2: '已完成'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            activeName: '0',
            search: {
                keys: '',
                is_all: 1,
                pages: 1,
                limit: 10,
                total: 0
            },
            searchNum: {
                user_count: 0,
                kehu_count: 0,
                business_count: 0,
                order_count: 0
            },
            dataList: []
        }
    },
    mounted() {
        if (this.$route.query.searchKey) {
            this.search.keys = this.$route.query.searchKey;
            this.getList();
        }
    },
    methods: {
        // 线索详情
        userDetail(row) {
            this.$refs.userDetailDrawer.showDialog({id: row.id}, {}); 
        },
        // 客户详情
        kehuDetail(id) {
            this.$refs.kehuDetailDrawer.showDialog({id: id}, {}); 
        },
        // 商机详情
        businessDetail(row) {
            this.$refs.businessDetailDrawer.showDialog({id: row.id}, {}); 
        },
        // 订单详情
        orderDetail(row) {
            this.$refs.orderDetailDrawer.showDialog({id: row.id}, {}); 
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.search.pages = 1;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        tabCheck(e) {
            this.activeName = e.index;
            this.search.pages = 1;
            this.getList();
        },
        // 获取列表
        getList() {
            if (this.activeName == '0') {
                // this.search.is_all = 1;
                userList(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                })
            } else if (this.activeName == '1') {
                // this.search.is_all = 0;
                kehuList(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                })
            } else if (this.activeName == '2') {
                // this.search.is_all = 0;
                businessList(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                })
            } else if (this.activeName == '3') {
                // this.search.is_all = 0;
                orderList(this.search).then(res => {
                    if (res.status == 1) {
                        this.dataList = res.data.list || [];
                        this.search.total = Number(res.data.count);
                    }
                })
            }
            this.getSearchNum();
        },
        getSearchNum() {
            searchNum({keys: this.search.keys}).then(res => {
                this.searchNum = res.data.info;
            })
        }
    }
}
</script>
